<template>
	<view class="userlist">
		<view class="item">
			<view class="header">
				<view class="header_left">
					<image src="" mode=""></image>
					<text class="username">username</text>
				</view>
				<view class="header_right">
					<button type="default" @click="handleGz">+ 关注</button>
				</view>
			</view>
			<view class="content">
				<text class="usertitle">
					<strong>如何用首长改变</strong>
				</text>
				<view class="imgcon">
					<view class="pos_center">
						<text class="">P</text>
					</view>
					<view class="pos_footer">
						<text>
							最大播放量：12345
						</text>
					</view>
					<image class="content_img" src="" mode=""></image>
				</view>
	
				<view class="content_footer">
					<view class="content_left">
						<text class="iconfont icon-xiaolian"></text>
						<text>
							987
						</text>
						<text class="iconfont icon-kuliankulian"></text>
						<text>
							123
						</text>
					</view>
					<view class="content_right">
						<text class="iconfont icon-xiaoxi"></text>
						<text>
							34
						</text>
						<text class="iconfont icon-zhuanfa"></text>
						<text>
							7
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		methods:{
			handleGz(){
				uni.showToast({
					title:"关注成功",
					
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.userlist {
		width: 100vw;
		padding: 0 30upx;
	
		.item {
			.header {
				display: flex;
				justify-content: space-between;
				align-items: center;
	
				.header_left {
					width: 300upx;
					display: flex;
					align-items: center;
	
					image {
						height: 80upx;
						height: 80upx;
						border-radius: 50%;
					}
	
					text {
						font-size: 28upx;
						color: #555;
					}
				}
	
				.header_right {
					button {
						padding: 0;
						width: 130upx;
						height: 60upx;
						line-height: 60upx;
						background-color: #f1f1f1
					}
	
					text {}
				}
			}
	
			.content {
				.usertitle {
					font-size: 36upx;
					color: #333;
				}
	
				.imgcon {
					position: relative;
	
					.pos_footer {
						position: absolute;
						bottom: 20upx;
						right: 20upx;
	
						text {
							font-size: 24upx;
							color: #555;
						}
					}
	
					.content_img {
						margin: 40upx 0;
						height: 400upx;
						width: 100%;
					}
	
				}
	
				.content_footer {
					height: 40upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
	
					.content_left {
						height: 50upx;
						line-height: 50upx;
	
						text {
							font-size: 30upx;
							margin-right: 10upx;
	
							&:nth-of-type(even) {
								color: #555;
								font-size: 26upx;
							}
						}
	
					}
	
					.content_right {
						text {
							font-size: 30upx;
							margin-left: 10upx;
	
							&:nth-of-type(even) {
								color: #555;
								font-size: 26upx;
							}
						}
	
	
					}
	
				}
			}
		}
	
	}
</style>
